<template>
  <div class="dialog-mask" @click.self="$emit('close')">
    <div class="dialog-content container">
      <div class="dialog-main">
        <div class="red-header">
          <div>红包金额：{{ redInfo.remainMoney }}</div>
          <div>红包数量：{{ redInfo.remainSize }}</div>
        </div>
        <div class="red-open">
          <button class="open-btn" @click="takeRed" :disabled="loading">{{ loading ? '抢中...' : '开' }}</button>
        </div>
        <div v-if="takeAmount !== null" class="take-result">
          恭喜你抢到：<span class="money">{{ takeAmount }}</span> 元！
        </div>
        <div class="close-btn" @click="$emit('close')">关闭</div>
      </div>
      <div class="taker-list">
        <div class="taker-title">已抢到红包</div>
        <ul>
          <li v-for="(taker, idx) in takerList" :key="idx">
            <span class="taker-name">{{ taker.username.slice(0, 5) + '...' }}</span>
            <span class="taker-amount">{{ taker.money }}元</span>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="showMsg" class="custom-alert-mask">
      <div class="custom-alert-box">
        <div class="custom-alert-content">{{ msgContent }}</div>
        <button class="custom-alert-btn" @click="showMsg = false">知道了</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import axios from '../axios';

const props = defineProps({
  redInfo: { type: Object, required: true }
});
const emit = defineEmits(['close', 'taken', 'updateMoney']);
const takeAmount = ref(null);
const loading = ref(false);
const takerList = ref([]);
const showMsg = ref(false);
const msgContent = ref('');

const takeRed = async () => {
  if (loading.value) return;
  loading.value = true;
  try {
    const res = await axios.get('/red-package/take', { params: { redId: props.redInfo.id } });
    if (res.data.code === 200) {
      takeAmount.value = res.data.data;
      emit('taken');
      const userRes = await axios.get('/user/getInfo');
      emit('updateMoney', userRes.data.data?.money || 0);
      fetchTakerList(); // 抢红包成功后刷新列表
    } else {
      showAlert(res.data.msg);
    }
  } catch (e) {
    showAlert(e.message);
  } finally {
    loading.value = false;
  }
};

const fetchTakerList = async () => {
  try {
    const res = await axios.get('/red-package/takers', { params: { redId: props.redInfo.id } });
    if (res.data.code === 200) {
      takerList.value = res.data.data;
    }
  } catch (e) {
    // 可选：错误处理
  }
};

function showAlert(msg) {
  msgContent.value = msg;
  showMsg.value = true;
}

onMounted(fetchTakerList);
watch(() => props.redInfo.id, fetchTakerList);
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.dialog-content {
  background: #fff;
  border-radius: 10px;
  padding: 32px 28px 24px 28px;
  min-width: 260px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 4px 24px #409eff22;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.dialog-main {
  flex: 1;
}
.red-header {
  font-size: 18px;
  margin-bottom: 16px;
  color: #222;
}
.red-open {
  margin: 24px 0;
}
.open-btn {
  font-size: 24px;
  color: #fff;
  background: #f56c6c;
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  cursor: pointer;
  box-shadow: 0 2px 8px #f56c6c33;
  transition: background 0.2s;
}
.open-btn:disabled {
  background: #fbc4c4;
  cursor: not-allowed;
}
.open-btn:hover:not(:disabled) {
  background: #e24444;
}
.take-result {
  margin: 16px 0;
  font-size: 20px;
  color: #e6a23c;
}
.money {
  font-weight: bold;
  color: #f56c6c;
}
.close-btn {
  margin-top: 16px;
  color: #999;
  cursor: pointer;
  font-size: 15px;
}
.taker-list {
  width: 160px;
  margin-left: 24px;
  border-left: 1px solid #eee;
  padding-left: 16px;
  text-align: left;
}
.taker-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #f56c6c;
}
.taker-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 180px; /* 7个用户，每个大约30px，可根据实际调整 */
  overflow-y: auto;
}
.taker-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 15px;
  padding-right: 10px;
}
.taker-name {
  color: #333;
}
.taker-amount {
  color: #e6a23c;
}
.taker-list ul::-webkit-scrollbar {
  width: 8px;
  background: #fff0f0;
  border-radius: 6px;
}
.taker-list ul::-webkit-scrollbar-thumb {
  background: #f56c6c;
  border-radius: 6px;
  min-height: 24px;
}
.taker-list ul::-webkit-scrollbar-thumb:hover {
  background: #e24444;
}
.taker-list ul::-webkit-scrollbar-track {
  background: #fff0f0;
  border-radius: 6px;
}
.custom-alert-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.custom-alert-box {
  background: #fff7f0;
  border: 2px solid #f56c6c;
  border-radius: 12px;
  padding: 28px 32px 20px 32px;
  min-width: 220px;
  box-shadow: 0 4px 24px #f56c6c22;
  text-align: center;
}
.custom-alert-content {
  color: #e24444;
  font-size: 17px;
  margin-bottom: 18px;
  font-weight: bold;
}
.custom-alert-btn {
  background: #f56c6c;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 28px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.custom-alert-btn:hover {
  background: #e24444;
}
</style>
